<template>
  <div class="container">
    <div class="subtitle">
      <p>
        <span class="title-point"></span>
        RFID记录
      </p>
      <div class="title-extra">
        <img src="../assets/image/blue-stack.png" alt />
      </div>
    </div>
    <div class="content">
      <ul class="record-list">
        <li v-for="(item) in items" :key="item.id" class="record-li">
          <span class="number">{{item.carnum}}</span>
          <span class="state">{{item.username}}</span>
          <span class="time">{{item.date}}</span>
        </li>
        <!--<li class="record-li">-->
          <!--<span class="number">13444</span>-->
          <!--<span class="state">离开</span>-->
          <!--<span class="time">2019-05-07 08:09:04</span>-->
        <!--</li>-->
        <!--<li class="record-li">-->
          <!--<span class="number">13444</span>-->
          <!--<span class="state">离开</span>-->
          <!--<span class="time">2019-05-07 08:09:04</span>-->
        <!--</li>-->
        <!--<li class="record-li">-->
          <!--<span class="number">13444</span>-->
          <!--<span class="state">离开</span>-->
          <!--<span class="time">2019-05-07 08:09:04</span>-->
        <!--</li>-->
        <!--<li class="record-li">-->
          <!--<span class="number">13444</span>-->
          <!--<span class="state">离开</span>-->
          <!--<span class="time">2019-05-07 08:09:04</span>-->
        <!--</li>-->
        <!--<li class="record-li">-->
          <!--<span class="number">13444</span>-->
          <!--<span class="state">离开</span>-->
          <!--<span class="time">2019-05-07 08:09:04</span>-->
        <!--</li>-->
      </ul>
    </div>
  </div>
</template>

<script>
  import https from '@/assets/js/https.js'
export default {
  name: "record",
  data() {
    return {
      items: [],
    };
  },
  props: ["userId"],
  mounted() {
    this.getRFIDS();
    var that=this;
    this.$mytimer.addCallBack(this,function (host) {
      if (that==host){
        that.getRFIDS();
      }
    })
  },
  methods: {
    getRFIDS() {
      let params ={"userId":this.userId}
      let self = this;
      https.fetchGet('/web/RFID/list?num=5',params ).then((data) => {
        self.items = data.data
      }).catch(err=>{
                console.log(err)
              }
      );
    }
  }
};
</script>

<style scoped lang="scss">
.container {
  width: 325px;
  height: 208px;
  background: url("../assets/image/bottom1.png");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 10px;
}
.record-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid rgba(56, 147, 255, 1);
  border-top: 1px solid rgba(56, 147, 255, 1);
}
.record-li {
  height: 30px;
  border: 2px solid rgba(56, 147, 255, 1);
  font-size: 12px;
  align-items: center;
  display: flex;
  background: rgba(56, 147, 255, 0.23);
  border-bottom: 1px solid rgba(56, 147, 255, 1);
  border-top: 1px solid rgba(56, 147, 255, 1);
  span {
    text-align: center;
  }
}
.number {
  color: #00faff;
  width: 68px;
}
.state {
  width: 76px;
  background: url("../assets/image/small_border.png");
  background-repeat: no-repeat;
  margin-right: 4px;
  height: 26px;
  line-height: 26px;
}
.time {
  width: 150px;
  color: #fdef21;
  height: 26px;
  line-height: 26px;
  background: url("../assets/image/big_border.png");
  background-repeat: no-repeat;
}
</style>
